<template>
  <div>
    <h1>修改资源</h1>
    <el-form
      :model="ruleForm2"
      status-icon
      :rules="rules2"
      ref="ruleForm2"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="患者姓名" prop="name" :hide-required-asterisk="true">
        <el-input type="text" v-model="ruleForm2.name"></el-input>
      </el-form-item>
      <el-form-item label="创建人">
        <el-input type="text" v-model="ruleForm2.createName"></el-input>
      </el-form-item>
      <el-form-item label="性别" class="sex">
        <el-radio-group v-model="ruleForm2.sex">
          <el-radio :label="1">男</el-radio>
          <el-radio :label="2">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="咨询大夫">
        <el-input type="text" v-model="ruleForm2.zxdf"></el-input>
      </el-form-item>
      <el-form-item label="病种">
        <el-select v-model="ruleForm2.zhenduan" placeholder="请选择" @change="bzchange">
          <el-option
            v-for="item in bingzhong"
            :key="item.value"
            :label="item.label"
            :value="item.label"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="主治医师">
        <el-cascader
          expand-trigger="hover"
          :options="doctorList"
          v-model="ruleForm2.doctor"
          @change="doctorChange"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="手机" prop="phone">
        <el-input type="text" v-model="ruleForm2.phone"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="ruleForm2.status" placeholder="请选择">
          <el-option
            v-for="item in statusList"
            :key="item.value"
            :label="item.label"
            :value="item.label"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="地区" prop="region">
        <el-cascader
          placeholder="可输入地区名字搜索"
          v-model="ruleForm2.region"
          :options="city"
          filterable
          change-on-select
          ref="citybox"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="资源来源">
        <el-cascader
          expand-trigger="hover"
          :options="webList"
          v-model="ruleForm2.msgsource"
          @change="sourceChange"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="QQ">
        <el-input type="text" v-model="ruleForm2.qq"></el-input>
      </el-form-item>
      <el-form-item label="是否紧急">
        <el-input type="text" v-model="ruleForm2.urgency"></el-input>
      </el-form-item>
      <el-form-item label="微信">
        <el-input type="text" v-model="ruleForm2.weixin"></el-input>
      </el-form-item>
      <el-form-item label="患病部位">
        <el-input type="text" v-model="ruleForm2.buwei"></el-input>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model.number="ruleForm2.age"></el-input>
      </el-form-item>
      <el-form-item label="第二备案人">
        <el-input v-model="ruleForm2.beianren"></el-input>
      </el-form-item>
      <el-form-item label="症状">
        <el-input v-model="ruleForm2.zz"></el-input>
      </el-form-item>
      <el-form-item label="住院时间">
        <el-input type="text" v-model="ruleForm2.date"></el-input>
      </el-form-item>
      <el-form-item label="患者备注" class="textarea">
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="ruleForm2.textarea"
          :autosize="{ minRows: 4, maxRows: 4}"
          resize="none"
        ></el-input>
      </el-form-item>
      <el-form-item class="btn">
        <el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
        <el-button type="primary" @click="close">关闭</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import axios from "axios";
export default {
  created () {
    // 获取城市
    this.getCity();
    // 获取静态人名
    this.getDoctor();
    // 获取用户要编辑的数据
    this.ruleForm2 = this.$store.state.editData;
    this.ruleForm2.sex = this.ruleForm2.sex == "男" ? 1 : 2;
    this.ruleForm2.region = this.ruleForm2.regionKey.split(",").map(Number);
    this.ruleForm2.doctor = this.ruleForm2.doctor.split("/");
  },
  computed: {
    getUserIcons () {
      return this.$store.state.editData;
    }
  },
  watch: {
    getUserIcons (val) {
      this.ruleForm2 = val;
    }
  },
  data () {
    var validateName = (rule, value, callback) => {
      if (value == "") {
        callback(new Error("请输入姓名"));
      } else {
        callback();
      }
    };
    var checkRegion = (rule, value, callback) => {
      if (value == null) {
        callback(new Error("请选择地区"));
      } else {
        callback();
      }
    };
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入手机号"));
      }
      setTimeout(() => {
        if (!/((0\d{2,3}-\d{7,8})|(^1[3456789]\d{9}$))$/.test(value)) {
          callback(new Error("请输入座机号或者手机号"));
        } else {
          callback();
        }
      }, 500);
    };
    return {
      rules2: {
        name: [{ validator: validateName, trigger: "blur" }],
        phone: [{ validator: checkPhone, trigger: "blur" }],
        region: [{ validator: checkRegion, trigger: "blur" }]
      },
      ruleForm2: {},
      city: [],
      // 八大病种
      bingzhong: [],
      // 主治医生
      doctorList: [],
      // 是否有效
      statusList: [],
      // 患者来源
      webList: [],

      isShow: false
    };
  },
  watch: {},
  methods: {
    getCity () {
      axios.get("/static/data/city.json").then(res => {
        this.city = res.data.info;
      });
    },
    getDoctor () {
      axios.get("/static/data/doctor.json").then(res => {
        this.bingzhong = res.data.bingzhong;
        this.doctorList = res.data.doctorList;
        this.statusList = res.data.statusList;
        this.webList = res.data.webList;
      });
    },
    // 诊断窗口改变成八大病种 资源变成有效
    bzchange () {
      if (
        this.ruleForm2.zhenduan == "待确诊" ||
        this.ruleForm2.zhenduan == "淘汰"
      ) {
        this.ruleForm2.status = "无效";
      } else {
        this.ruleForm2.status = "有效";
      }
    },
    success (msg) {
      this.$message({
        message: msg,
        type: "success"
      });
    },
    fault (msg) {
      this.$message.error(msg);
    },
    // 选择医生
    doctorChange (value) {
      // console.log(value);
    },
    // 选择来源
    sourceChange (value) {
      // console.log(value);
    },
    // 提交更新
    submitForm (formName) {
      let that = this;
      this.$refs[formName].validate(valid => {
        if (valid) {
          axios.post('api/edit', {
            name: that.ruleForm2.name,
            createName: that.ruleForm2.createName,
            age: that.ruleForm2.age,
            sex: that.ruleForm2.sex == 1 ? "男" : "女",
            websource: that.ruleForm2.websource,
            zhenduan: that.ruleForm2.zhenduan,
            zxdf: that.ruleForm2.zxdf,
            phone: that.ruleForm2.phone,
            doctor: that.ruleForm2.doctor.join("/"),
            region: this.$refs.citybox.currentLabels.join("/"),
            date: that.ruleForm2.date,
            qq: that.ruleForm2.qq,
            msgsource: that.ruleForm2.msgsource.join("/"),
            regionKey: this.ruleForm2.region,
            weixin: that.ruleForm2.weixin,
            urgency: that.ruleForm2.urgency,
            buwei: that.ruleForm2.buwei,
            createTime: this.ruleForm2.createTime,
            lastTime: that.base.dateFtt("yyyy-MM-dd hh:mm:ss", new Date()),
            zz: that.ruleForm2.zz,
            beianren: that.ruleForm2.beianren,
            status: that.ruleForm2.status,
            _id: that.ruleForm2._id,
            textarea: that.ruleForm2.textarea

          }).then(res => {
            if (res.data.status == 1) {
              that.success(res.data.msg);
              that.$router.push({ path: "/data/state" });
              that.$emit("parentisShow", that.isShow);
              that.$emit("updataisClass", false);
            } else {
              that.fault(data.msg);
            }
          }).catch(error => {
            console.log(error)
          })
        } else {
          this.fault("请输入标红的内容");
          return false;
        }
      });
    },
    timetrans () {
      var date = new Date(); //如果date为13位不需要乘1000
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      var h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      var m =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      var s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return Y + M + D + h + m + s;
    },
    close () {
      this.$emit("parentisShow", false);
    }
  }
};
</script>

<style lang="stylus" scoped>
form {
  width: 600px;
  display: flex;
  flex-wrap: wrap;

  .el-form-item {
    justify-content: space-around;
    width: 299px;
    margin-bottom: 12px !important;
  }
}

.textarea {
  width: 600px !important;
}

.btn {
  width: 100%;
  width: 498px !important;
}
</style>

